import React from "react";
import './MainContent.css'
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
import {bizs} from "../../../dic";

class MainContent extends React.Component {

    constructor(props) {
        super(props)
    }

    componentWillUnmount() {
        if (this.swiper) { // 销毁swiper
            this.swiper.destroy()
        }
    }

    componentDidMount() {
        if (this.swiper) {
            this.swiper.slideTo(0, 0)
            this.swiper.destroy()
            this.swiper = null;
        }
        this.swiper = new Swiper('.swiper-container', {
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            loop: true,
            loopedSlides: 5,
            spaceBetween: 15,
            centeredSlides: true,
            slidesPerView: 'auto',
            pagination: {
                // el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
            },
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
        })
    }

    render() {
        return (
            <div className="m-Content">
                {/*业务领域*/}
                <div className="c-t-biz">
                    <div className="m-ctxt-title">
                        <span>业务领域</span>
                        <span>BUSINESS AREA</span>
                    </div>
                    <div>
                        <ul className="c-t-biz-ul">
                            {
                                bizs.filter((x,i)=>i<8).map((x, i) => {
                                    return (
                                        <li onClick={()=>{
                                            this.$router.push({
                                                pathname : '/businessDetail',
                                                search:"id="+x.id
                                            })
                                        }} key={i}>
                                            <img src="/images/biz_main-img.jpg" alt=""/>
                                            <a href="">{x.name}</a>
                                        </li>
                                    )
                                })

                            }
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                            {/*<li>*/}
                            {/*    <img src="/images/main_content_case.png" alt=""/>*/}
                            {/*    <a href="">现货被骗公司</a>*/}
                            {/*</li>*/}
                        </ul>
                    </div>
                </div>

                {/*服务案例*/}
                <div>
                    <div className="m-ctxt-title">
                        <span>服务案例</span>
                        <span>CASE</span>
                    </div>
                    <div>
                        <div className="swiper-container c-t-caro">
                            <div className="swiper-wrapper">
                                {
                                    bizs.filter((x,i)=>i<6).map((x, i) => {
                                        return (
                                            <div className="swiper-slide cp" data-swiper-slide-index={i} onClick={()=>{
                                                this.$router.push({
                                                    pathname : '/businessDetail',
                                                    search:"id="+x.id
                                                })
                                            }} key={i}>
                                                <img src="/images/biz_main-img.jpg"/>
                                                <span>{x.title}</span>
                                            </div>
                                        )
                                    })
                                }
                                {/*<div className="swiper-slide" data-swiper-slide-index="0">*/}
                                {/*    <img src="images/main_content_case.png"/>*/}
                                {/*    <a href="#">服务案例</a>*/}
                                {/*</div>*/}
                                {/*<div className="swiper-slide" data-swiper-slide-index="1">*/}
                                {/*    <img src="images/main_content_case.png"/>*/}
                                {/*    <a href="#">服务案例</a>*/}
                                {/*</div>*/}
                                {/*<div className="swiper-slide" data-swiper-slide-index="2">*/}
                                {/*    <img src="images/main_content_case.png"/>*/}
                                {/*    <a href="#">服务案例</a>*/}
                                {/*</div>*/}
                            </div>
                            <div className="swiper-pagination swiper-pagination-bullets"></div>

                            <div className="swiper-button-prev"></div>
                            <div className="swiper-button-next"></div>

                            <div className="swiper-scrollbar"></div>
                        </div>
                    </div>
                </div>

                {/*新闻中心*/}
                <div>
                    <div className="m-ctxt-title">
                        <span>新闻中心</span>
                        <span>NEWS INFORMATION</span>
                    </div>
                    <div>
                        <ul className="t-c-new-ul">
                            <li className="t-c-new-li">
                                <div>01</div>
                                <div>
                                    <span className="t-c-tl-1">股票配资都有哪些违规</span>
                                    <span className="t-c-tl-2"></span>
                                    <span className="t-c-tl-3"> 股票配资对于众多散户股民来说虽然门槛不高，但因其自身运营方式，只收取投资者管理费而不参与投资者在股市中盈利的分红，所以在利息上行业里都会有一个大致的标准，基本不会用低息低费来当做噱头，因为明眼人都知道，股票配资平台都已经不拿投资者的分红了，利息再不收，难道他们是喝西北风长大的?如果大家遇到了靠低息低费当做噱头的配资公司，在合作之前一定要多加留意该公司的现状以及是否有其他隐形收费。 </span>
                                </div>
                            </li>
                            <li className="t-c-new-li">
                                <div>01</div>
                                <div>
                                    <span className="t-c-tl-1">股票配资都有哪些违规</span>
                                    <span className="t-c-tl-2"></span>
                                    <span className="t-c-tl-3"> 股票配资对于众多散户股民来说虽然门槛不高，但因其自身运营方式，只收取投资者管理费而不参与投资者在股市中盈利的分红，所以在利息上行业里都会有一个大致的标准，基本不会用低息低费来当做噱头，因为明眼人都知道，股票配资平台都已经不拿投资者的分红了，利息再不收，难道他们是喝西北风长大的?如果大家遇到了靠低息低费当做噱头的配资公司，在合作之前一定要多加留意该公司的现状以及是否有其他隐形收费。 </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div className="t-c-ref-infclick"><a href="">查看个更多资讯</a></div>
                </div>
            </div>
        )
    }
}

export default MainContent